<nz-row [nzGutter]="24" class="py-lg">
  <nz-col [nzSpan]="6">
    <nz-card nzTitle="个人设置" class="ant-card__body-nopadding">
      <a (click)="active=1" class="d-block py-sm px-md" [ngClass]="{'bg-primary-light text-white':active===1}">密码</a>
      <!--<a (click)="active=2" class="d-block py-sm px-md" [ngClass]="{'bg-primary-light text-white':active===2}">密码</a>-->
    </nz-card>
  </nz-col>
  <nz-col [nzSpan]="18">
    <nz-card nzTitle="个人信息" *ngIf="active===2">
      <nz-row [nzGutter]="64">
        <nz-col [nzSpan]="16">
          <form nz-form [formGroup]="profileForm" (ngSubmit)="profileSave($event, profileForm.value)" [nzLayout]="'vertical'">
            <nz-form-item>
              <nz-form-label nzFor="name" nzRequired>姓名</nz-form-label>
              <nz-form-control>
                <input nz-input formControlName="name" id="name">
                <div *ngIf="name.invalid && (name.dirty || name.touched)">
                  <nz-form-explain *ngIf="name.errors.required">The field is required</nz-form-explain>
                  <nz-form-explain *ngIf="profileForm.hasError('maxlength', 'name')">最多30个字符</nz-form-explain>
                </div>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label nzFor="tel">电话</nz-form-label>
              <nz-form-control>
                <input nz-input formControlName="tel" id="tel">
                <div>
                  <nz-form-explain *ngIf="profileForm.hasError('maxlength', 'tel')">最多16个字符</nz-form-explain>
                </div>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label nzFor="mobile">手机</nz-form-label>
              <nz-form-control>
                <input nz-input formControlName="mobile" id="mobile">
                <div>
                  <nz-form-explain *ngIf="profileForm.hasError('maxlength', 'mobile')">最多16个字符</nz-form-explain>
                </div>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label nzFor="email">Email</nz-form-label>
              <nz-form-control>
                <input nz-input formControlName="email" id="email">
                <div>
                  <nz-form-explain *ngIf="profileForm.controls['email'].dirty&&profileForm.controls['email'].hasError('email')">最多50个字符</nz-form-explain>
                </div>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-control>
                <button *ngIf="canEdit" nz-button [nzType]="'primary'">保存</button>
              </nz-form-control>
            </nz-form-item>
          </form>
        </nz-col>
        <nz-col [nzSpan]="8">
          <h4>头像</h4>
          <nz-upload class="avatar-uploader"
            [nzAction]="uploadUrl"
            [nzData]="avatarParam"
            nzName="file"
            [nzShowUploadList]="false"
            [nzBeforeUpload]="beforeUpload"
            (nzChange)="handleChange($event)">
            <i *ngIf="!avatarUrl" class="anticon anticon-plus avatar-uploader-trigger"></i>
            <img *ngIf="avatarUrl" [src]="avatarUrl" class="avatar">
          </nz-upload>
        </nz-col>
      </nz-row>
    </nz-card>
    <nz-card nzTitle="修改密码" *ngIf="active===1">
      <nz-row [nzGutter]="64">
        <nz-col [nzSpan]="16">
          <form nz-form [nzLayout]="'vertical'">
            <nz-form-item>
              <nz-form-label nzFor="old_password" nzRequired>旧密码</nz-form-label>
              <nz-form-control>
                <input nz-input [(ngModel)]="pwd.old_password" name="old_password" id="old_password" type="password" required>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label nzFor="new_password" nzRequired>新密码</nz-form-label>
              <nz-form-control>
                <input nz-input [(ngModel)]="pwd.new_password" name="new_password" id="new_password" type="password" required>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label nzRequired nzFor="confirm_new_password">再次输入新密码</nz-form-label>
              <nz-form-control>
                <input nz-input [(ngModel)]="pwd.confirm_new_password" name="confirm_new_password" id="confirm_new_password" type="password" required>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-control>
                <button nz-button (click)="pwdSave()" [nzType]="'primary'">保存</button>
              </nz-form-control>
            </nz-form-item>
          </form>
        </nz-col>
      </nz-row>
    </nz-card>
  </nz-col>
</nz-row>
